<template>
  <el-container style=" height: 12vh; border-bottom: 3px solid #eee">
    <!-- <el-header style="text-align:start;"> -->
    <i class="el-icon-user-solid" style="font-size:2em; margin-right:10px;" />
    <h1>人事管理系统</h1>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      tab-position="bottom"
    >
      <el-tab-pane label="员工查看" name="1"></el-tab-pane>
      <el-tab-pane label="查询员工" name="2"></el-tab-pane>
    </el-tabs>
    <!-- </el-header> -->
  </el-container>
</template>

<script>
export default {
  name: 'HeaderHome',
  data() {
    return {
      activeName: '1'
    }
  },

  methods: {
    handleClick(tab) {
      switch (tab.name) {
        case '1':
          this.$router.push('/home')
          break
        case '2':
          this.$router.push('/search')
          break
      }
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 20px;
}

.el-tabs {
  /* height: 100%; */
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}

/* 如果要给子组件下的元素修饰css需要用到>>>来指向元素，否则css只会修饰元素外层的子组件 */
.el-tabs >>> .el-tabs__item {
  font-size: 20px;
}
</style>
